<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Prescription Update</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/jquery/jquery.maskedinput.min.js"></script>
    <script src="${contextPath}/js/prescription/prescription.js"></script>
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="prescription-registration-form-container" class="form-container">
        		<%-- header-container --%>
	       		<s:set var="mode" value="'edit'"/>
	   			<jsp:include page="/WEB-INF/content/prescription/PrescriptionHeaderContainer.jsp" flush="true"/>
	   			
        		<form id="prescription-edit-form" class="registration-form prescription-form" action="${contextPath}/prescription/update" method="post">
                	<input type="hidden" name="guiPrescription.prescriptionId" value="${guiPrescription.prescriptionId}" />
					<input type="hidden" name="guiPrescription.patient.userId" value="${guiPrescription.patient.userId}"/>
					<input type="hidden" name="guiPrescription.term" value="${guiPrescription.term}"/>
                	<fieldset>
                    	<%-- prescription-info-container --%>
	               		<div class="patient-info-container">
		                   	<jsp:include page="/WEB-INF/content/prescription/PrescriptionPatientDetails.jsp" flush="true"/>
	                   	</div>
                    	
                    	<s:if test="%{guiPrescription.existPrevPrescription}">
                    		<div id="HistoryInfoContainer">
	                    		<legend>History of the illness</legend>
	                    	</div>
	                    	<p class="subheader-secondary">
								Presenting Complaints (P/C)
								<span class="subheader-secondary opt1-4">(${guiPrescription.prevPrescription.dateString})</span>
							</p>
	                    	<div id="previouslyIdentifiedSymptomList">
		                    	<s:iterator var="prevSyptom" value="%{guiPrescription.prevPrescription.syptomList}" status="stat">
			                    	<div class="identifiedSymptom padding10 border">
			                    		${prevSyptom.name}
			                    	</div>
		                    	</s:iterator>
	                    	</div>
	                    	<div id="prev-prescription-details-container" style="display:none;">
	                    		<div class="treatment-info-container">
				                   	<p class="subheader-secondary">Presenting Complaints (P/C)</p>
				                   	<div id="identifiedSymptomList">
				                    	<s:iterator var="prevSyptom" value="%{guiPrescription.prevPrescription.syptomList}" status="stat">
						                   	<div class="identifiedSymptom padding10 border">
					                    		${prevSyptom.name}
						                   	</div>
				                    	</s:iterator>
				                   	</div>
			                   	</div>
			                   	<br/>
	                    		<div id="symptom-duration-container">
			                   		<p class="subheader-secondary">Duration (Days)</p>
			                   		<div>${guiPrescription.prevPrescription.symptomDuration}</div>
			                   	</div>
			                   	<br/>
	                    		<div id="prescription-diagnostic-container">
									<p class="subheader-secondary">Diagnosis Description</p>
			                    	<div id="treatmentNoteContainer">${guiPrescription.prevPrescription.diagnosticDescription}</div>
								</div>
	                    		<div class="comment-info-container">
				                   	<p class="subheader-secondary">Comment</p>
				                   	<div>
				                   		<blockquote>
				                   			<p>${guiPrescription.prevPrescription.comment}</p>
				                   		</blockquote>
				                   	</div>
			                   	</div>
	                    		<div class="treatment-date-container">
				                   	<legend>Treatment Date</legend>
				                   	<div class="subheader-secondary">${guiPrescription.prevPrescription.dateString}</div>
			                   	</div>
	                    	</div>
	                    	<br/>
	                    	<div><a id="prev-prescription-details-opener" class="button">more details</a></div>
                    	</s:if>
                    	
                    	<div id="treatment-container">
	                    	<legend>Today's Treatment</legend>
	                    	<p class="subheader-secondary">Presenting Complaints (P/C)</p>
	                    	<h6>suggested symptoms list</h6>
                            <div id="prescription-symptom-container">
                                <s:iterator var="oSyptom" value="%{guiPrescription.syptomList}" status="stat">
                                    <div data-role="input-control" class="input-control text">
                                        <input type="hidden" name="guiPrescription.syptomList[${stat.count+1}].syptomId" value="${oSyptom.syptomId}"/>
                                        <input type="text" name="guiPrescription.syptomList[${stat.count+1}].name" readonly="readonly" value="${oSyptom.name}"/>
                                        <button tabindex="-1" class="btn-symptom-clear btn-clear" type="button"></button>
                                    </div>
                                </s:iterator>
                            </div>
                            <h6>type new symptom for suggestion</h6>
                            <div data-role="input-control" class="input-control text">
                                <input type="text" id="create-new-symptom" name="guiPrescription.syptomList[1].name" value="" placeholder="type new symptom" />
                                <button tabindex="-1" class="btn-clear" type="button"></button>
                            </div>
                            <h6>select a symptom & click 'add' button to register as a new suggestion</h6>
                            <div id="symptom-control-container" class="input-control select">
                                <s:select id="new-symptom" name="guiPrescription.syptomList[0].syptomId" value="" 
                                list="%{guiSyptomList}" listKey="syptomId" listValue="name" headerKey="-1" headerValue="-- select a symptom name --"></s:select>
                            </div>
                            <div class="textActions">
                            	<input id="add-new-symptom" value="Add" type="button" class="bg-teal">
                            </div>
							<br/>
                    	</div>
                    	
                    	<div id="symptom-duration-container">
                    		<p class="subheader-secondary">Duration (Days)</p>
                    		<div data-role="input-control" class="input-control text">
                                <input type="text" id="symptom-duration" name="guiPrescription.symptomDuration" value="" placeholder="type duration" />
                                <button tabindex="-1" class="btn-clear" type="button"></button>
                            </div>
                    	</div>
                    	
                    	<div id="prescription-diagnostic-container">
							<p class="subheader-secondary">Diagnosis Description</p>
	                    	<div id="treatmentNoteContainer">
								<div data-role="input-control" class="input-control textarea">
									<textarea name="guiPrescription.diagnosticDescription" placeholder="type diagnosis description">${guiPrescription.diagnosticDescription}</textarea>
								</div>
							</div>
						</div>
						
						<div class="medicine-info-container">
							<p class="subheader-secondary">Medicine</p>
							<h6>selected drug list for meditation</h6>
							<table class="table striped bordered hovered">
		                   		<thead class="medicine-header-container">
		                   			<tr>
		                   				<th>Drug</th>
		                   				<th>Terms Per Day</th>
		                   				<th>No. Of Days</th>
		                   				<th>Get Treatment</th>
		                   				<th>Issue</th>
		                   			</tr>
		                   		</thead>
		                   		<tbody id="prescription-drug-issue-container">
		                   			<s:iterator var="oDrugIssue" value="%{guiPrescription.drugIssueList}" status="stat">
			                   			<tr class="drug-issue-container">
			                   				<td>${oDrugIssue.drug.name}</td>
			                   				<td>${oDrugIssue.termsPerDay}</td>
			                   				<td>${oDrugIssue.noOfDays}</td>
			                   				<td>${oDrugIssue.treatmentTime.label}</td>
			                   				<td>
	                                        	<input type="hidden" name="guiPrescription.drugIssueList[${stat.count}].drugIssueId" value="${oDrugIssue.drugIssueId}"/>
	                                            <input type="hidden" name="guiPrescription.drugIssueList[${stat.count}].drug.drugId" value="${oDrugIssue.drug.drugId}"/>
	                                            <input type="hidden" name="guiPrescription.drugIssueList[${stat.count}].termsPerDay" value="${oDrugIssue.termsPerDay}"/>
	                                            <input type="hidden" name="guiPrescription.drugIssueList[${stat.count}].noOfDays" value="${oDrugIssue.noOfDays}"/>
	                                            <input type="hidden" name="guiPrescription.drugIssueList[${stat.count}].treatmentTime" value="${oDrugIssue.treatmentTime.id}"/>
												<label class="input-control checkbox">
	                                                <s:if test="%{#oDrugIssue.issue}">
	                                                    <input type="checkbox" name="guiPrescription.drugIssueList[${stat.count}].issue" value="true" checked="checked"/>
	                                                </s:if>
	                                                <s:else>
	                                                    <input type="checkbox" name="guiPrescription.drugIssueList[${stat.count}].issue" value="true"/>
	                                                </s:else>
	                                                <span class="check"></span>
	                                            </label>
	                                            <i class="icon-remove btn-drugissue-clear button on-right"></i>
											</td>
			                   			</tr>
		                   			</s:iterator>
		                   		</tbody>
		                   	</table>
							<h6>select a drug & click 'add' button to register new meditation</h6>
                            <div class="grid fluid" style="margin-bottom:0px;">
                                <div class="row">
                                    <div class="span3">
                                        <div class="input-control select">
                                            <s:select id="new-drug-issue-drugId"
                                                list="%{guiDrugList}" listKey="drugId" listValue="name"
                                                headerKey="-1" headerValue="-- select a drug name --"></s:select>
                                        </div>
                                    </div>
                                    <div class="span3">
                                        <div data-role="input-control" class="input-control text">
                                            <input id="new-drug-issue-terms-per-day" class="terms-per-day" placeholder="type terms per day" type="text">
                                            <button type="button" tabindex="-1" class="btn-clear"></button>
                                        </div>
                                    </div>
                                    <div class="span3">
                                        <div data-role="input-control" class="input-control text">
                                            <input id="new-drug-issue-no-of-days" class="no-of-days" placeholder="type no. of days" type="text">
                                            <button type="button" tabindex="-1" class="btn-clear"></button>
                                        </div>
                                    </div>
                                    <div class="span3">
                                        <div class="input-control select">
                                            <s:select id="new-drug-issue-treatment-time"
                                                list="%{treatmentTimeList}" listKey="id" listValue="label"
                                                headerKey="-1" headerValue="Get treatment @"></s:select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="textActions">
                                <input id="add-new-drug-issue" value="Add" type="button" class="bg-teal"/>
                            </div>
						</div>
						<br/>
						<div id="prescription-comment-container">
							<p class="subheader-secondary">Comment</p>
	                    	<div id="treatmentNoteContainer">
								<div data-role="input-control" class="input-control textarea">
									<textarea name="guiPrescription.comment" placeholder="type doctor comment">${guiPrescription.comment}</textarea>
								</div>
							</div>
						</div>
						<div>
							<legend>Treatment Date</legend>
							<div id="date-picker" class="input-control text" data-role="datepicker" data-date='${guiPrescription.dateString}' data-format='yyyy-mm-dd'>
								<input type="text" name="guiPrescription.dateString" value="${guiPrescription.dateString}"/>
								<div class="btn-date"></div>
							</div>
						</div>
						<div class="form-button-container">
	                        <a onClick="$('#prescription-edit-form').submit(); return false;">
	                            <div class="form-button tile half-vertical subheader-secondary bg-cobalt fg-white">
	                                update <i class="icon-spin on-right smaller"></i>
	                            </div>
	                        </a>
	                        <a id="btn-cancel" href="${contextPath}">
	                            <div class="form-button tile half-vertical subheader-secondary bg-cyan fg-white">
	                                cancel <i class="icon-cancel-2 on-right smaller"></i>
	                            </div>
	                        </a>                            
		                </div>
        			</fieldset>
        		</form>
    		</div>    
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>